<template>
    <div class="tree">
        <div class="trew">
            <a-button class="tree2">处方</a-button>
            <a-button class="tree1">病历</a-button>
        </div>
        <div class="firstLine" style="display:flex;justify-content: space-around;">
            <div>
                <p>患者姓名<span class="spanless">*</span></p>
                <input type="text" placeholder="患者姓名/手机号码/证件号码/卡号" />
            </div>
            <div>
                <p>患者卡号<span class="spanless">*</span></p>
                <input type="text" />
            </div>
            <div>
                <p>患者年龄<span class="spanless">*</span></p>
                <input type="text" />
            </div>
            <div>
                <p>出生日期<span class="spanless">*</span></p>
                <input type="text" />
            </div>

        </div>
        <div class="firstLine" style="display:flex;justify-content: space-around;">
            <div>
                <p>性别<span class="spanless">*</span></p>
                <select style="width:300px;height:40px;border-radius: 4px;">
                    <option></option>
                    <option value="1">男</option>
                    <option value="0">女</option>
                </select>
            </div>

            <div>
                <p>手机号码<span class="spanless">*</span></p>
                <input type="text" />
            </div>
            <div>
                <p>证件号码<span class="spanless">*</span></p>
                <input type="text" />
            </div>
            <div>
                <p>接诊类型<span class="spanless">*</span></p>
                <input type="text" />
            </div>

        </div>

        
        <div class="threeLine" style="margin-left: 50px;border-radius: 6px;">
            <p style="margin-bottom: 0;margin-top: 20px;">地址</p>
            <select style="width:300px;height:40px">
                <option></option>
            </select>
            <input type="text"
                style="display: inline-block;width:710px;height:40px;border:1px solid gray;margin-left: 110px;" />
        </div>
        <div class="fourLine" style="display: flex;margin-left: 38px;">
            <div>

                <p>诊断</p>
                <input type="text" />
            </div>
            <div style="margin-left: 80px;">
                <p>医疗</p>
                <input type="text" />
            </div>
        </div>

    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import {
    DownOutlined
} from '@ant-design/icons-vue';
export default defineComponent({
    components: {
        DownOutlined
    },
    setup() {


        return {}
    }
})
</script>

<style lang = "less" scoped>
.tree {
    width: 100%;
    border: 1px solid;
    border-radius: 10px;
    background-color: #fff;

}

.ant-btn {
    background-color: #666EE8;
    color: #fff;
    width: 100px;
}

.tree1 {
    background-color: #fff;
    color: darkgrey;
    border-radius: 5px;
}

.trew {
    margin-left: 30px;
    margin-top: 20px;
}

.tree2 {
    font-weight: bold;
    border-radius: 5px;
}

.inputclass {
    width: 270px;
    height: 40px;
    border-radius: 5px;
}

.spanas {
    color: red;
}

.inputs {
    margin: 20px;
}

.nice2 {
    margin-left: 20px;
    width: 270px;
    border-radius: 5px;
}

.nice {
    margin: 10px;
}

.nice,
p,
input {

    display: flex;
    margin-left: 5px;
    border-radius: 5px;
}

.downs {
    position: relative;
    left: 250px;
    bottom: 25px;
    color: #5c5c65;
    border-radius: 5px;
}

.spanless {
    color: red;
}

.reve {
    margin-left: 25px;
    width: 270px;
    border-radius: 5px;
    height: 90px;
}

.reveinput {
    width: 560px;
    position: relative;
    left: 290px;
    bottom: 54px;
    border-radius: 5px;
}

.inputs>input {
    width: 560px;
    display: flex;
}

.inputs {
    margin-left: 25px;
}

.tree {
    height: 400px;

    .firstLine {
        input {
            width: 300px;
            height: 40px;
            border: 1px solid gray;
        }

        p {
            margin-bottom: 0px;
            margin-top: 20px;
        }
    }

    .fourLine {
        input {
            width: 600px;
            height: 40px;
            border: 1px solid gray
        }

        p {
            margin-bottom: 0px;
            margin-top: 20px;
        }
    }

   

}
</style>